<template id="tablewrap">
  <el-table
    ref="table"
    v-loading="loading"
    :data="tableData"
    :tree-props="{
      children: 'children',
      hasChildren: 'hasChildNodes'
    }"
    :default-expand-all="false"
    :highlight-current-row="true"
    :height="tableHeight"
    :indent="8"
    element-loading-background="rgba(0, 0, 0, 0.25)"
    element-loading-text="拼命加载中"
    lazy
    :header-cell-class-name="addOne"
    row-key="uuid"
    class="tree-table"
    style="width:100%;"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-if="isDefine">
      <business-multi-level-colums
        v-for="(col, key) in columns"
        :key="key"
        :prop="dropCol[key]"
        :col="col"
      />
    </template>
    <template v-else>
      <multi-level-colums
        v-for="(col, key) in columns"
        :key="key"
        :num="key"
        :prop="dropCol[key]"
        :col="col"
      />
    </template>
    <template slot="empty">
      <div v-show="!loading" class="empty-text">
        <svg-icon icon-class="taken" class="svg-container" />
        <span class="empty-content">{{ emptyText }}</span>
      </div>
    </template>
  </el-table>
</template>
<script>
import MultiLevelColums from './components/MultiLevelColums';
import BusinessMultiLevelColums from '@/components/business/MultiLevelColums';
import Sortable from 'sortablejs';
export default {
  name: 'TreeTable',
  components: {
    MultiLevelColums,
    BusinessMultiLevelColums
  },
  props: {
    needDrag: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    treeNodeProp: {
      type: String,
      default: 'hasChildren'
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    isDefine: {
      type: Boolean,
      default: true
    }
  },
  inject: ['getTableHeight'],
  data() {
    const dropCol = this.columns;
    return {
      dropCol
    };
  },
  computed: {
    tableHeight() {
      return this.getTableHeight();
    }
  },
  mounted() {
    // 阻止默认行为
    if (this.needDrag) {
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      };
      this.rowDrop();
      this.columnDrop();
    }
  },
  methods: {
    // 添加类名
    addOne({ row, columnIndex }) {
      // console.log(row, rowIndex);
      if (row[columnIndex].label !== '行标签') {
        return 'drag';
      }
    },
    // // 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody'); // 获取table列表
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.data.splice(oldIndex, 1)[0];
          _this.data.splice(newIndex, 0, currRow);
        }
      });
    },
    // 列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 1000,
        delay: 30,
        draggable: '.drag',
        handle: '.drag',
        // 元素被选中
        onMove: evt => {
          // console.log(evt);
          if (evt.dragged.innerText === '行标签') {
            return false;
          }
        },
        onEnd: evt => {
          // console.log(evt);
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#tablewrap >>> .el-table__empty-text{
  position: absolute;
  left: 50%;
}
  .tree-table {
    position: relative;
    margin-top: 20px;
    cursor: pointer;
  }
  .empty-text {
    position: relative;
    height: 500px;
    text-align: left;
    line-height: 490px;
    font-size: 14px;
    margin-left: -85px;
  }
  .svg-container {
    display: inline-block;
    padding: 6px 5px 6px 0px;
    vertical-align: middle;
    width: 150px;
    height: 150px;
  }
  .empty-content {
    position: absolute;
    top: 86px;
    left: 46px;
  }
</style>
